/* =========================================================
   GAME PORTAL — geometry-games.io inspired layout
   ========================================================= */

:root{
    --bg:           #141416;
    --bg-2:         #1a1a1d;
    --panel:        #1f1f22;
    --panel-2:      #232326;
    --panel-3:      #2a2a2e;
    --border:       #2c2c30;
    --border-2:     #3a3a3e;
    --text:         #f3efe9;
    --text-dim:     #d2cec9;   /* dim+ contrast AA on panel-2 */
    --text-mute:    #a3a09c;   /* mute+ contrast AA */
    --accent:       #ec9024;
    --accent-2:     #f5a548;
    --accent-soft:  rgba(236,144,36,.14);
    --accent-glow:  rgba(236,144,36,.45);
    --hot:          #ff6a3d;
    --new:          #2ecc71;
    --like:         #ec9024;
    --dislike:      #e85d6e;
    --shadow:       0 8px 24px rgba(0,0,0,.45);
    --shadow-btn:   0 4px 10px rgba(0,0,0,.35);
    --radius-sm:    6px;
    --radius:       10px;
    --radius-lg:    14px;
    --font:         'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* compat: variables used by inline comment widget styles */
:root{
    --txt:        var(--text);
    --txt2:       var(--text-dim);
    --bg2:        var(--panel-2);
    --bg3:        var(--panel-3);
    --bg-card:    var(--panel);
    --border-h:   var(--accent);
    --accent2:    var(--accent);
}

/* light theme */
html.theme-light{
    --bg:           #f1f1f3;
    --bg-2:         #ffffff;
    --panel:        #ffffff;
    --panel-2:      #fafafb;
    --panel-3:      #e8e8eb;
    --border:       #dadade;
    --border-2:     #c4c4c8;
    --text:         #15161a;
    --text-dim:     #2e3036;
    --text-mute:    #5a5d65;
    --shadow:       0 8px 24px rgba(20,20,20,.08);
    --shadow-btn:   0 2px 6px rgba(20,20,20,.12);
    --accent-soft:  rgba(236,144,36,.12);
}

/* footer keeps its own colors so they read in both themes */
html.theme-light .footer{
    background:#fafafb;
    color:var(--text-dim);
    border-top:1px solid var(--border);
}
html.theme-light .f-copy,
html.theme-light .f-links a{ color:var(--text-dim); }
html.theme-light .f-links a:hover{ color:var(--accent); }

/* header search & buttons explicit contrast */
html.theme-light .s-search{ background:var(--panel-2); }
html.theme-light .s-search input{ color:var(--text); }
html.theme-light .like-btn,
html.theme-light .fs-btn{
    background:var(--panel-2);
    color:var(--text);
    border:1px solid var(--border);
}
html.theme-light .like-btn:hover,
html.theme-light .fs-btn:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}
html.theme-light .like-btn span{ color:var(--text-mute); }

/* hesd stays dark always (game iframe is dark) */
html.theme-light .hesd{ background:#0a0a0a; }

/* like.png / dislike.png are white icons — invert for visibility */
html.theme-light .like-btn img{ filter:invert(0.85) brightness(0.4); }
html.theme-light .like-btn:hover img,
html.theme-light .like-btn.rated img{ filter:brightness(0) invert(1); }

/* ---- comment widget overrides (force theme variables) ---- */
.comment-title-v3,
.comment-title-v3 h2{ color:var(--text) !important; }
.comment-timestamp{ color:var(--text-mute) !important; }
.comment-content-v3{ color:var(--text) !important; }
.filter-btn{ color:var(--text-mute) !important; background:transparent !important; }
.filter-btn.active,
.filter-btn:hover{ color:var(--text) !important; background:var(--panel) !important; }
.comment-filter-v3{ background:var(--panel-2) !important; border-color:var(--border) !important; }
.comment-count-badge{ background:var(--panel) !important; color:var(--text) !important; border-color:var(--border) !important; }
.reaction-btn{ color:var(--text-dim) !important; border-color:var(--border) !important; }
.reaction-btn:hover{ color:var(--text) !important; background:var(--panel) !important; border-color:var(--accent) !important; }
.reaction-btn.active{ background:var(--accent-soft) !important; color:var(--accent) !important; border-color:rgba(236,144,36,.4) !important; }
.comment-reply-btn{ color:var(--text-dim) !important; }
.comment-reply-btn:hover{ color:var(--text) !important; background:var(--panel) !important; }
.reply-count{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.reply-to-info{ background:var(--accent-soft) !important; color:var(--accent) !important; border-color:rgba(236,144,36,.3) !important; }
.comment-tag{ color:var(--accent) !important; }
.form-agreement{ color:var(--text-dim) !important; }
.form-agreement label{ color:var(--text-dim) !important; }
.form-agreement a{ color:var(--text) !important; }
.form-agreement a:hover{ color:var(--accent) !important; }
.form-title{ color:var(--text) !important; }
.dropdown-item{ color:var(--text-dim) !important; }
.dropdown-item:hover{ background:var(--panel-2) !important; color:var(--text) !important; }
.dark-mode-toggle{ color:var(--text-dim) !important; }
.dark-mode-toggle:hover{ color:var(--text) !important; background:var(--panel-2) !important; }
.btn-load-more{ color:var(--text-dim) !important; }
.btn-load-more:hover:not(:disabled){ color:var(--text) !important; background:var(--panel-2) !important; }
.tool-btn{ color:var(--text-mute) !important; background:var(--panel-2) !important; }
.tool-btn:hover{ color:var(--text) !important; background:var(--panel-3) !important; }
.comment-textarea-v3,
.input-field-v3{
    background:var(--panel-2) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
}
.comment-textarea-v3::placeholder,
.input-field-v3::placeholder{ color:var(--text-mute) !important; }
.comment-form-v3{
    background:var(--panel-2) !important;
    border-color:var(--border) !important;
}
.comment-card-v3{
    background:var(--panel-2) !important;
    border-color:var(--border) !important;
}
.comment-card-v3:hover{ border-color:var(--border-2) !important; background:var(--panel-3) !important; }
.sub-comments .comment-card-v3{
    background:var(--panel-3) !important;
    border-color:var(--border) !important;
    border-left:2px solid var(--border-2) !important;
}
.sub-comments .comment-card-v3:hover{
    border-left-color:var(--accent) !important;
    background:var(--panel-2) !important;
}
.reply-form-container{
    background:var(--panel) !important;
    border-color:var(--border) !important;
}
.submit-btn-v3{
    background:var(--accent) !important;
    color:#fff !important;
    max-width:200px !important;
    margin-left:0 !important;
    margin-right:auto !important;
}
.submit-btn-v3:hover:not(:disabled){
    background:var(--accent-2) !important;
}
.empty-state,
.empty-state-text{ color:var(--text-mute) !important; }
.comment-menu-btn{ color:var(--text-mute) !important; }
.comment-menu-btn:hover{ color:var(--text) !important; background:var(--panel-2) !important; }

/* theme switch contrast in light mode */
html.theme-light .s-theme{ background:var(--panel-2); border-color:var(--border); }
html.theme-light .s-theme-opt{ color:var(--text-mute); }
html.theme-light .s-theme-opt:not(.active):hover{ color:var(--text); }

/* play-now and badges already use white on accent — fine */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:var(--bg); color:var(--text); font-family:var(--font); }
body{ margin:0; min-height:100vh; line-height:1.55; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; background:none; border:0; color:inherit; padding:0; }
main{ display:block; }

/* heading defaults — single source of truth */
h1, h2, h3, h4, h5, h6{
    font-family:var(--font);
    color:var(--text);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
    margin:0 0 .5em 0;
}
h1{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:22px; font-weight:800; }
h3{ font-size:18px; font-weight:700; }
h4{ font-size:16px; font-weight:700; }
h5{ font-size:14px; font-weight:700; }
h6{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* =========================================================
   HEADER — centered nav pills + search + theme switch
   ========================================================= */
.site-header{
    position:sticky; top:0; z-index:50;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 24px;
    background:var(--bg);
    border-bottom:1px solid var(--border);
}
/* push search + theme to the right edge */
.s-search{ margin-left:auto; }

.s-burger{
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text);
    border-radius:8px;
    transition:background .2s ease, color .2s ease;
}
.s-burger:hover{ background:var(--panel); color:var(--accent); }

/* Home pill button */
.s-home{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px;
    padding:0 18px;
    background:var(--accent);
    color:#fff;
    font-size:14px; font-weight:700;
    border-radius:999px;
    letter-spacing:.3px;
    box-shadow:0 4px 12px var(--accent-glow);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.s-home:hover{
    background:var(--accent-2);
    transform:translateY(-2px);
    box-shadow:0 8px 18px var(--accent-glow);
    color:#fff;
}
.s-burger svg{ overflow:visible; transition:transform .25s ease; }
.s-burger svg line{
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    transform-box:fill-box;
    transform-origin:center;
}
.s-burger svg line:nth-child(1){ transform-origin:50% 50%; }
.s-burger svg line:nth-child(3){ transform-origin:50% 50%; }

/* active state when side-nav is hidden / mobile menu open — morph to X + accent color */
body.nav-hidden .s-burger,
body.mmenu-open .s-burger{
    background:var(--accent);
    color:#fff;
}
body.nav-hidden .s-burger svg line:nth-child(1),
body.mmenu-open .s-burger svg line:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}
body.nav-hidden .s-burger svg line:nth-child(2),
body.mmenu-open .s-burger svg line:nth-child(2){
    opacity:0;
    transform:scaleX(.2);
}
body.nav-hidden .s-burger svg line:nth-child(3),
body.mmenu-open .s-burger svg line:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

/* center nav pills */
.s-nav{
    display:flex; align-items:center; justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    max-height:48px;
    overflow:hidden;
}

/* mobile tags below about — default hidden, shown on small screens */
.about-tags-mobile{ display:none; }
.s-nav-item{
    padding:8px 22px;
    border:1px solid var(--border-2);
    border-radius:999px;
    color:var(--text);
    font-size:14px;
    font-weight:600;
    transition:all .2s ease;
    white-space:nowrap;
}
.s-nav-item:hover{
    border-color:var(--accent);
    color:var(--accent);
}

/* search */
.s-search{
    position:relative;
    display:flex; align-items:center;
    width:320px; max-width:100%;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:999px;
    height:42px;
    padding:0 16px 0 42px;
    transition:border-color .15s ease;
}
.s-search:focus-within{ border-color:var(--accent); }
.s-search-icon{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-mute);
    pointer-events:none;
}
.s-search input{
    flex:1; height:100%; min-width:0;
    background:transparent; border:0; outline:none;
    color:var(--text); font-size:14px;
}
.s-search input::placeholder{ color:var(--text-mute); }

/* theme switch — two circles */
.s-theme{
    display:inline-flex; align-items:center;
    padding:3px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:999px;
    gap:0;
}
.s-theme-opt{
    width:34px; height:34px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    color:var(--text-mute);
    transition:all .2s ease;
}
.s-theme-opt.active[data-theme="dark"]{
    background:#2b6df5;
    color:#fff;
}
.s-theme-opt.active[data-theme="light"]{
    background:var(--accent);
    color:#fff;
}
.s-theme-opt:not(.active):hover{ color:var(--text); }

/* mobile menu drop */
.s-mobile-menu{
    display:none;
    position:fixed; top:64px; left:0; right:0; z-index:49;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    padding:14px 18px;
    flex-direction:column; gap:10px;
}
.s-mobile-menu.open{ display:flex; }
.s-mobile-menu a{ padding:10px 6px; border-bottom:1px solid var(--border); color:var(--text); }
.s-mobile-search{ display:flex; gap:8px; margin-top:8px; }
.s-mobile-search input{
    flex:1; background:var(--bg-2); border:1px solid var(--border-2);
    color:var(--text); border-radius:8px; padding:10px 12px; outline:none;
}
.s-mobile-search button{
    background:var(--accent); color:#fff; border:0; padding:0 16px;
    border-radius:8px; font-weight:700;
}

/* =========================================================
   SHELL — 5-column main layout
   nav | thumbs-left | player | thumbs-right | ad
   ========================================================= */
.shell{
    display:grid;
    grid-template-columns: 96px 200px minmax(0,1fr) 200px 300px;
    gap:18px;
    padding:18px 20px;
    max-width:1900px;
    margin:0 auto;
    align-items:start;
}
/* list/search/tag pages — drop the two thumb cols, give content a big 1fr middle */
.shell.shell-list{
    grid-template-columns: 96px minmax(0,1fr) 300px;
}
.shell.shell-list .thumb-col{ display:none; }
.list-content{ min-width:0; }

/* bigger game cards in list/search/tag pages (fewer cols, fluid) */
.list-content .N{
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap:18px !important;
}
.list-content .box-three .font{
    font-size:14px !important;
}

/* empty-state when grid has no results */
.grid-empty{
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:60px 30px;
    text-align:center;
    box-shadow:var(--shadow);
}
.grid-empty-icon{
    width:88px; height:88px;
    margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-3);
    border-radius:50%;
    color:var(--accent);
}
.grid-empty-title{
    margin:0 0 8px;
    font-size:20px; font-weight:800;
    color:var(--text);
}
.grid-empty-hint{
    margin:0 0 22px;
    color:var(--text-dim);
    font-size:14px;
    line-height:1.6;
}
.grid-empty-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff;
    padding:10px 26px;
    border-radius:999px;
    font-weight:700; font-size:14px;
    box-shadow:0 6px 16px var(--accent-glow);
    transition:transform .2s ease, background .2s ease;
}
.grid-empty-btn:hover{ transform:translateY(-2px); background:var(--accent-2); }

@media (max-width:768px){
    .grid-empty{ padding:40px 18px; }
    .grid-empty-icon{ width:72px; height:72px; }
    .grid-empty-title{ font-size:17px; }
    .grid-empty-hint{ font-size:13px; }
}

/* category / tag description block below grid */
.list-description{
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px 30px;
    margin-top:26px;
    box-shadow:var(--shadow);
}
.list-description .about-title{
    margin-top:0;
}
.list-description .about-text{
    max-height:none;   /* no truncation — full content */
    overflow:visible;
}

@media (max-width:768px){
    .list-description{ padding:18px 16px; }
}
@media (max-width:1200px){
    .shell.shell-list{ grid-template-columns: 80px minmax(0,1fr); }
    .shell.shell-list .ad-col{ display:none; }
}
@media (max-width:992px){
    .shell.shell-list{ grid-template-columns: 1fr; }
}
@media (max-width:768px){
    .list-content .N{
        grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap:12px !important;
    }
}
/* hamburger toggle — hide side-nav */
body.nav-hidden .side-nav{ display:none; }
body.nav-hidden .shell{ grid-template-columns: 200px minmax(0,1fr) 200px 300px; }

/* ---------- LEFT VERTICAL NAV (icon + label, tooltip on hover) ---------- */
.side-nav{
    position:sticky; top:78px;
    z-index:20;                /* lift above sibling thumb cols */
    display:flex; flex-direction:column;
    gap:6px;
}
.side-nav-item{
    position:relative;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
    padding:14px 6px;
    border-radius:10px;
    color:var(--text-dim);
    text-align:center;
    background:transparent;
    transition:background .2s ease, color .2s ease;
    min-height:78px;
}
.side-nav-item:hover{
    background:var(--panel);
    color:var(--text);
    z-index:30;                /* on hover, this item floats above all */
}
.side-nav-item.active{
    background:transparent;
    color:var(--accent);
}
.side-nav-item.active .side-nav-icon{ color:var(--accent); }
.side-nav-item.active .side-nav-label{ color:var(--accent); font-weight:800; }

.side-nav-item.muted{
    color:var(--text-mute);
    opacity:.6;
}
.side-nav-item.muted .side-nav-icon{ color:var(--text-mute); }

/* divider line between featured & categories */
.side-nav-divider{
    height:1px;
    background:var(--border);
    margin:6px 8px;
}

/* count badge on Recently Played */
.side-nav-count{
    position:absolute;
    top:6px; right:6px;
    min-width:18px; height:18px;
    padding:0 5px;
    background:var(--accent);
    color:#fff;
    font-size:10px; font-weight:800;
    border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px var(--accent-glow);
    border:2px solid var(--bg);
    line-height:1;
}
.side-nav-count[hidden]{ display:none; }

/* =========================================================
   Recently Played popup panel
   ========================================================= */
.recent-panel[hidden]{ display:none; }
.recent-panel{
    position:fixed; inset:0;
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    animation:rpFade .2s ease;
}
@keyframes rpFade{ from{ opacity:0; } to{ opacity:1; } }

.recent-panel-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    cursor:pointer;
}

.recent-panel-card{
    position:relative;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 24px 60px rgba(0,0,0,.6);
    width:min(900px, 100%);
    max-height:80vh;
    display:flex; flex-direction:column;
    overflow:hidden;
    animation:rpPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rpPop{
    from{ opacity:0; transform:translateY(20px) scale(.96); }
    to  { opacity:1; transform:translateY(0)    scale(1); }
}

.recent-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
}
.recent-panel-head h3{
    margin:0;
    font-size:18px;
    font-weight:800;
    color:var(--text);
    letter-spacing:-.01em;
}
.recent-panel-actions{ display:flex; align-items:center; gap:8px; }

.recent-clear{
    padding:6px 14px;
    background:transparent;
    border:1px solid var(--border-2);
    color:var(--text-dim);
    border-radius:999px;
    font-size:12px; font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:all .2s ease;
}
.recent-clear:hover{
    color:#fff;
    background:var(--dislike);
    border-color:var(--dislike);
}

.recent-close{
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-dim);
    border-radius:8px;
    transition:all .2s ease;
}
.recent-close:hover{ color:var(--text); background:var(--panel-3); }

.recent-panel-body{
    padding:20px 22px;
    overflow-y:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:14px;
}

.recent-card{
    display:flex; flex-direction:column;
    background:var(--panel);
    border:2px solid transparent;
    border-radius:10px;
    overflow:hidden;
    transition:all .25s ease;
    text-decoration:none;
    color:inherit;
}
.recent-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:0 10px 22px rgba(0,0,0,.4), 0 0 0 1px var(--accent-glow);
}
.recent-thumb{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#0a0a0a;
}
.recent-thumb img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.recent-card:hover .recent-thumb img{ transform:scale(1.06); }
.recent-meta{ padding:8px 10px 10px; }
.recent-name{
    font-size:13px; font-weight:700;
    color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.recent-time{
    font-size:11px; font-weight:600;
    color:var(--text-mute);
    margin-top:2px;
}

.recent-panel-empty{
    padding:60px 22px;
    text-align:center;
    color:var(--text-mute);
}
.recent-panel-empty p{
    margin:0 0 6px;
    font-size:16px; font-weight:700;
    color:var(--text);
}
.recent-panel-empty span{ font-size:13px; }
.recent-panel-empty[hidden]{ display:none; }

@media (max-width:600px){
    .recent-panel{ padding:12px; }
    .recent-panel-head{ padding:14px 16px; }
    .recent-panel-body{ padding:14px 16px; gap:10px; grid-template-columns:repeat(2, 1fr); }
    .recent-panel-head h3{ font-size:16px; }
    .recent-clear{ padding:5px 10px; font-size:11px; }
}
.side-nav-icon{
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1;
    flex:0 0 auto;
    color:var(--accent);          /* default orange icon */
}
.side-nav-icon svg{ display:block; }
.side-nav-badge{
    background:linear-gradient(135deg, #2ee577 0%, #14a85a 100%);
    color:#fff !important;
    font-size:10px;
    font-weight:800;
    padding:5px 10px;
    border-radius:6px;
    letter-spacing:1px;
    line-height:1;
    text-transform:uppercase;
    text-shadow:0 1px 0 rgba(0,0,0,.25);
    box-shadow:
        0 4px 10px rgba(46,204,113,.4),
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -1px 0 rgba(0,0,0,.2);
    border:1px solid rgba(255,255,255,.15);
    min-width:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
/* tiny spark next to NEW text */
.side-nav-badge::before{
    content:"✦";
    font-size:9px;
    margin-right:3px;
    opacity:.9;
}
.side-nav-label{
    font-size:11px; font-weight:700;
    color:inherit;
    letter-spacing:.2px;
    line-height:1.2;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;        /* keep on 1 line — full text shows in tooltip */
}

/* hover tooltip — full label pops out to the right (accent pill) */
.side-nav-item::after{
    content:attr(data-label);
    position:absolute;
    left:calc(100% + 14px);
    top:50%;
    transform:translateY(-50%) translateX(-8px) scale(.92);
    transform-origin:left center;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:#fff;
    padding:8px 16px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.3px;
    white-space:nowrap;
    text-transform:uppercase;
    box-shadow:0 8px 22px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.08) inset;
    text-shadow:0 1px 0 rgba(0,0,0,.2);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    z-index:9999;
}
.side-nav-item::before{
    content:"";
    position:absolute;
    left:calc(100% + 7px);
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    width:0; height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:8px solid var(--accent);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    z-index:10000;
}
.side-nav-item:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0) scale(1);
}
.side-nav-item:hover::before{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

/* ---------- THUMB COLUMNS (left/right of player) ---------- */
.thumb-col{
    display:flex; flex-direction:column;
    gap:14px;
    min-width:0;
}
.thumb-card{
    position:relative;
    display:block;
    aspect-ratio:16/10;
    border-radius:12px;
    overflow:hidden;
    background:var(--panel-2);
    border:2px solid transparent;
    transition:all .25s ease;
}
.thumb-card img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .3s ease;
}
.thumb-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 0 1px var(--accent-glow);
}
.thumb-card:hover img{ transform:scale(1.06); }

/* game name slide-up overlay on thumb-card hover */
.thumb-card .game-name{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:8px 8px 7px 8px;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.95) 100%);
    text-align:center;
    transform:translateY(100%);
    opacity:0;
    transition:transform .25s ease, opacity .25s ease;
    pointer-events:none;
    z-index:3;
}
.thumb-card:hover .game-name{
    transform:translateY(0);
    opacity:1;
}
.thumb-card .game-name .font{
    font-size:11.5px;
    font-weight:700;
    color:#fff;
    letter-spacing:.2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    line-height:1.3;
}
.thumb-badge,
.new-badge,
.hot-badge{
    position:absolute;
    top:8px;
    font-size:10px; font-weight:800;
    padding:3px 7px;
    border-radius:4px;
    letter-spacing:.5px;
    z-index:2;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    line-height:1.2;
}
.thumb-badge,
.new-badge{
    left:8px;
    background:var(--new);
    color:#062013;
}
.hot-badge{
    right:8px;
    background:var(--hot);
    color:#fff;
}
/* if both new + hot on same card, push hot to right edge — already handled by left/right */

/* ---------- PLAYER COLUMN ---------- */
.player-col{
    min-width:0;
    display:flex; flex-direction:column;
    gap:16px;
}
.cinema-player{ width:100%; }

/* game info card below player */
.player-info{
    position:relative;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 26px;
    box-shadow:var(--shadow);
    min-width:0;
}
.player-info .about-block + .about-block{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border);
}

/* collapsible content — no max-height transition (non-composited / triggers reflow) */
.player-info-content{
    position:relative;
    max-height:640px;
    overflow:hidden;
}
.player-info-content::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:120px;
    background:linear-gradient(to bottom, transparent 0%, var(--panel-2) 90%);
    pointer-events:none;
    transition:opacity .25s ease;
}
.player-info.expanded .player-info-content{ max-height:none; }
.player-info.expanded .player-info-content::after{ opacity:0; }
#expand{cursor: pointer;}
.fs-btn{cursor: pointer;}
/* content fits — remove cap and hide fade entirely */
.player-info.no-overflow .player-info-content{ max-height:none; }
.player-info.no-overflow .player-info-content::after{ display:none; }

/* show-more / show-less button */
.player-info-toggle{
    display:flex; align-items:center; justify-content:center;
    gap:6px;
    margin:14px auto 0;
    background:var(--panel-3);
    color:var(--text);
    padding:9px 24px;
    border-radius:999px;
    font-weight:700; font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px;
    border:1px solid var(--border);
    transition:all .2s ease;
}
.player-info-toggle:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}
.player-info-toggle .pit-arrow{
    transition:transform .25s ease;
    display:block;
}
.player-info.expanded .player-info-toggle .pit-arrow{ transform:rotate(180deg); }

/* hide toggle entirely if not needed (set via JS) */
.player-info-toggle.hidden{ display:none; }

.box-player{
    background:#0a0a0a;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}
.player-ad-bar{ display:none; }
.player-ad-bar:has(.adsx:not(:empty)){
    display:flex; justify-content:center;
    padding:10px;
    background:var(--bg-2);
    border-bottom:1px solid var(--border);
}

.hesd{
    position:relative;
    background:#0a0a0a;
    width:100%;
    height:0;
    padding-bottom:56.25%;   /* 16:9 — iframe fills via absolute */
    overflow:hidden;
}
.hesd iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    display:block;
    border:0;
    background:transparent;
}
.iframe-default.force_full_screen{
    position:fixed !important; inset:0 !important;
    width:100% !important; height:100% !important;
    z-index:9999; background:#000;
}

/* player title bar */
.player-bar{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--panel);
    border-top:1px solid var(--border);
    padding:12px 18px 26px 18px;
    gap:12px;
    flex-wrap:wrap;
}
.player-bar-left{
    display:flex; align-items:center; gap:12px;
    min-width:0; flex:1 1 auto;
}
.player-bar-right{
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;
}

/* game title with thumbnail */
.player-title{
    display:flex; align-items:center; gap:10px;
    min-width:0;
}
.player-thumb{
    width:70px; height:50px;
    border-radius:6px;
    object-fit:cover;
    flex:0 0 auto;
}
.player-name{
    margin:0;
    font-size:22px; font-weight:800;
    color:var(--text);
    letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    line-height:1.2;
}

/* circular icon buttons (fullscreen / comments) */
.fs-btn{
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--panel-3);
    border:1px solid var(--border);
    border-radius:50%;
    color:var(--text);
    font-size:0;
    box-shadow:var(--shadow-btn);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),
               background .2s ease,
               border-color .2s ease,
               box-shadow .25s ease,
               color .2s ease;
    flex:0 0 auto;
}
.fs-btn svg{ font-size:initial; }
.fs-btn:hover{
    transform:translateY(-4px) scale(1.08);
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:0 10px 22px var(--accent-glow);
}
.fs-btn:active{ transform:translateY(-2px) scale(1.02); }

/* action buttons — circular pills */
.like-bar{
    display:flex; align-items:center; gap:10px;
    position:relative;
}
.like-btn{
    position:relative;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--panel-3);
    border:1px solid var(--border);
    border-radius:50%;
    color:var(--text);
    box-shadow:var(--shadow-btn);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),
               background .2s ease,
               border-color .2s ease,
               box-shadow .25s ease;
}
.like-btn:hover{
    transform:translateY(-4px) scale(1.08);
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 10px 22px var(--accent-glow);
}
.like-btn:hover img{ filter:brightness(0) invert(1); }
.like-btn:hover span{ color:var(--accent) !important; font-weight:800; }
.like-btn:active{ transform:translateY(-2px) scale(1.02); }

/* dislike hover — red instead of orange */
.like-btn#Dlike:hover{
    background:var(--dislike);
    border-color:var(--dislike);
    box-shadow:0 10px 22px rgba(232,93,110,.45);
}
.like-btn#Dlike:hover span{ color:var(--dislike) !important; }
.like-btn img{
    width:18px; height:18px;
    transition:filter .2s ease;
}
.like-btn span{
    position:absolute;
    left:50%; bottom:-18px;
    transform:translateX(-50%);
    font-size:11px;
    font-weight:600;
    color:var(--text-mute);
    white-space:nowrap;
}
.like-btn.rated{
    background:var(--accent);
}
.like-btn.rated img{ filter:brightness(0) invert(1); }
.like-btn#Dlike:hover{ background:var(--dislike); }
.like-btn#Dlike.rated{ background:var(--dislike); }

.like-toast{
    position:absolute; left:0; top:-38px;
    background:#000; color:#fff;
    padding:6px 12px; border-radius:6px; font-size:12px;
    opacity:0; transform:translateY(4px); pointer-events:none;
    transition:.2s ease;
    white-space:nowrap;
    z-index:5;
}
.like-toast.show{ opacity:1; transform:translateY(0); }


/* ===========================================================
   AD SLOTS
   - Mỗi vị trí 1 class riêng, kích thước IAB cố định
   - Không đủ chỗ → ẩn nguyên block, không bao giờ shrink
   =========================================================== */

.ad-block{
    display:flex; flex-direction:column;
    align-items:center;
    gap:6px;
    margin:0 auto;
}
.ad-block .ad-label{
    font-size:9px;
    color:var(--text-mute);
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:1;
    opacity:.6;
}
.ad-block .ad-slot{
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:8px;
}
.ad-block .ad-slot > *{ max-width:100%; max-height:100%; }
.ad-block:has(.adsx:empty){ display:none; }

/* (1) Top of player — 728×90 leaderboard */
.ad-top .ad-slot{ width:728px; height:90px; }
@media (max-width:820px){ .ad-top{ display:none; } }

/* (2) Below player — AUTO / responsive (fills player-col) */
.ad-below-player{ width:100%; }
.ad-below-player .ad-slot{
    width:100%;
    min-height:280px;
    height:auto;
}
@media (max-width:768px){
    .ad-below-player .ad-slot{ min-height:200px; }
}

/* (3) Above More-Games — 970×250 billboard (full-width content) */
.ad-mid{ margin:8px auto 22px; }
.ad-mid .ad-slot{ width:970px; height:250px; }
@media (max-width:1060px){ .ad-mid{ display:none; } }

/* Right column — 300×250 medium rectangle */
.ad-side-rect  .ad-slot{ width:300px; height:250px; }

/* Right column — 300×600 half-page */
.ad-side-half  .ad-slot{ width:300px; height:600px; }

/* Right column — 160×600 wide skyscraper */
.ad-side-tower .ad-slot{ width:160px; height:600px; }

.ad-col{
    display:flex; flex-direction:column;
    align-items:center;
    gap:18px;
}
@media (max-width:992px){ .ad-col{ display:none; } }

/* =========================================================
   ABOUT
   ========================================================= */
.games-section{
    box-sizing:border-box;
    max-width:1900px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
}

.section-label{ display:none; }

.about-title{
    margin:0 0 16px 0;
    color:var(--accent);
    font-size:20px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.6px;
    line-height:1.25;
}
.about-subtitle{
    margin:0 0 12px 0;
    color:var(--accent);
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.about-text{
    color:var(--text-dim);
    font-size:15px; line-height:1.8;
}
.about-text p{ margin:0 0 14px 0; }
.about-text p:last-child{ margin-bottom:0; }
.about-text h1,
.about-text h2,
.about-text h3,
.about-text h4{
    color:var(--accent);
    margin:22px 0 10px 0;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.about-text h1{ font-size:20px; }
.about-text h2{ font-size:18px; }
.about-text h3{ font-size:16px; }
.about-text h4{ font-size:14.5px; }
.about-text strong,
.about-text b{ color:var(--text); font-weight:700; }
.about-text a{ color:var(--accent); }
.about-text a:hover{ text-decoration:underline; }
.about-text ul,
.about-text ol{ padding-left:20px; margin:0 0 14px 0; }
.about-text li{ margin:4px 0; }

.about-tags{
    display:flex; flex-wrap:wrap; gap:8px;
    padding-top:14px; margin-top:14px;
    border-top:1px solid var(--border);
}
.about-tags a{
    display:inline-block;
    background:var(--accent-soft);
    color:var(--accent);
    border:1px solid rgba(236,144,36,.32);
    padding:6px 12px;
    border-radius:6px;
    font-size:12.5px;
    transition:background .2s ease, color .2s ease;
}
.about-tags a:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* =========================================================
   MORE GAMES — full-width grid
   ========================================================= */
.games-section{ min-width:0; margin-bottom:30px; }
.L{ padding:6px 0; min-width:0; }
.L .label{
    display:block;
    margin:6px 0 18px 0;
    padding-bottom:10px;
    font-size:22px; font-weight:800;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.8px;
    border-bottom:1px solid var(--border);
}
.new{ display:block; min-width:0; }
.N{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
    width:100%;
}
.N > a{ display:block; text-decoration:none; color:inherit; min-width:0; }
.hover{ display:block; min-width:0; }
.box-three{
    position:relative;
    background:var(--panel);
    border:2px solid transparent;
    border-radius:var(--radius);
    overflow:hidden;
    min-width:0;
    transition:all .25s ease;
}
.N > a:hover .box-three{
    transform:translateY(-5px) scale(1.03);
    border-color:var(--accent);
    box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 0 1px var(--accent-glow);
}
.box-three img{
    width:100% !important; height:auto !important;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:0 !important;
    box-shadow:none !important;
    display:block;
    max-width:100%;
    transition:transform .3s ease;
}
.N > a:hover .box-three img{ transform:scale(1.04); }

/* game name slides up from bottom on hover, overlaying the image */
.box-three .game-name{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:10px 10px 10px 10px;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.95) 100%);
    text-align:center;
    transform:translateY(100%);
    transition:transform .25s ease, opacity .25s ease;
    opacity:0;
    pointer-events:none;
}
.N > a:hover .box-three .game-name{
    transform:translateY(0);
    opacity:1;
}
.box-three .font{
    font-size:12.5px; font-weight:700; color:#fff;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:.3px;
}

/* pagination */
.paging{ padding:24px 0 0; }
.pagination{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:8px;
    justify-content:center;
}
.pagination li a,
.pagination li span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:48px; height:48px; padding:0 18px;
    border-radius:10px;
    background:var(--panel);
    border:1px solid var(--border);
    color:var(--text);
    font-size:16px; font-weight:700;
    transition:all .2s ease;
}
.pagination li a:hover{ border-color:var(--accent); color:var(--accent); }
.pagination li span{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* comments / fb */
.comment-wrap{
    margin-top:24px;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 22px;
}
.comment-inner{ color:var(--text); }

/* moregames (search) cards */
.wiss{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .15s ease, border-color .15s ease;
}
.wiss:hover{ transform:translateY(-3px); border-color:var(--accent); }
.wiss .BG{ padding:10px 12px; color:var(--text); border-top:1px solid var(--border); background:var(--panel); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
    margin-top:32px;
    padding:0;
    background:#0e0e10;
    border-top:1px solid var(--border);
    color:var(--text-dim);
    font-size:14px;
}
.footer-inner{
    max-width:1900px;
    margin:0 auto;
    padding:22px 28px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
}
.f-copy{ color:var(--text-dim); font-size:14px; }
.f-back{
    justify-self:center;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent);
    color:#fff;
    padding:11px 26px;
    border-radius:999px;
    font-weight:700; font-size:14px;
    box-shadow:0 8px 22px var(--accent-glow);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.f-back:hover{ transform:translateY(-2px); background:var(--accent-2); box-shadow:0 12px 28px var(--accent-glow); }
.f-back svg{ display:block; }
.f-links{ justify-self:end; display:flex; gap:22px; }
.f-links a{ color:var(--text-dim); font-size:14px; transition:color .15s ease; }
.f-links a:hover{ color:var(--accent); }

/* floating Back to game */
.f-back-float{
    position:fixed; left:50%; bottom:22px; z-index:60;
    transform:translate(-50%, 20px);
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent); color:#fff;
    padding:11px 24px;
    border-radius:999px;
    font-weight:700; font-size:14px;
    box-shadow:0 10px 26px var(--accent-glow);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
    text-decoration:none;
}
.f-back-float.show{
    opacity:1; transform:translate(-50%, 0);
    pointer-events:auto;
}
.f-back-float:hover{ background:var(--accent-2); }
.f-back-float svg{ display:block; }

/* misc rating widget (hidden but defensive) */
.rd-wrap{ color:var(--text); }
.detail-sec-title{
    font-size:13px; color:var(--text-mute);
    text-transform:uppercase; letter-spacing:1.5px;
    margin-bottom:8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* 1600 — tighten thumb cols */
@media (max-width:1600px){
    .shell{ grid-template-columns: 88px 180px minmax(0,1fr) 180px 280px; gap:14px; }
    body.nav-hidden .shell{ grid-template-columns: 180px minmax(0,1fr) 180px 280px; }
}

/* 1400 — drop right ad column */
@media (max-width:1400px){
    .shell{ grid-template-columns: 88px 180px minmax(0,1fr) 180px; }
    body.nav-hidden .shell{ grid-template-columns: 180px minmax(0,1fr) 180px; }
    .ad-col{ display:none; }
}

/* 1200 — drop left thumb col, keep right */
@media (max-width:1200px){
    .shell{ grid-template-columns: 80px minmax(0,1fr) 180px; }
    body.nav-hidden .shell{ grid-template-columns: minmax(0,1fr) 180px; }
    .thumb-col-left{ display:none; }
}

/* 1100 — hide header tag pills, show Home icon + tags under About */
@media (max-width:1100px){
    .s-nav{ display:none; }
    .about-tags-mobile{ display:flex; }
}

/* 992 — drop side nav too */
@media (max-width:992px){
    .shell{ grid-template-columns: minmax(0,1fr) 200px; padding:14px; }
    .side-nav{ display:none; }
}

/* 768 — single column */
@media (max-width:768px){
    .site-header{
        padding:10px 14px;
        gap:8px;
        flex-wrap:wrap;
    }
    .s-search{ flex:1 1 100%; order:5; }
    .s-nav{ display:none; }
    .s-search{ width:auto; flex:1; height:40px; padding-left:38px; padding-right:14px; }
    .s-search-icon{ left:12px; width:16px; height:16px; }

    .shell{
        grid-template-columns:1fr;
        padding:12px;
        gap:14px;
    }
    .thumb-col-right{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:8px;
    }
    .thumb-col-right .thumb-card{ aspect-ratio:16/10; }

    .hesd{ padding-bottom:75%; }   /* 4:3 on mobile — slightly taller for touch */

    .player-bar{ padding:10px 12px; }
    .player-bar-left{ flex:1 1 auto; }
    .player-bar-right{ gap:6px; }
    .like-btn,
    .fs-btn{ width:36px; height:36px; }

    .games-section{
        padding-left:12px;
        padding-right:12px;
    }
    .player-info{ padding:18px 16px; }
    .about-title{ font-size:18px; }
    .about-subtitle{ font-size:16px; }
    .about-text{ font-size:14px; line-height:1.75; }
    .L .label{ font-size:18px; }
    .N{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
    .box-three .font{ font-size:11.5px; }

    .footer-inner{
        grid-template-columns:1fr;
        text-align:center;
        gap:14px;
        padding:18px 16px;
    }
    .f-back{ justify-self:center; }
    .f-links{ justify-self:center; gap:14px; flex-wrap:wrap; justify-content:center; }
    .f-copy{ font-size:12.5px; }

    .f-back-float{ bottom:14px; padding:9px 18px; font-size:13px; }
}

/* 480 */
@media (max-width:480px){
    .s-theme{ display:none; }
    .hesd{ padding-bottom:80%; }
    .thumb-col-right{ grid-template-columns:repeat(3, 1fr); }
    .N{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
}